import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'
import global from '../../global';
import { ScrollView, Button, Map, Swiper, SwiperItem, Picker, Input, Image } from '@tarojs/components'
import Request from "../../api";
import Event from "../../event";
import {debounce} from '../../utils';

export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      messages: [],
      title: '',
      page: 1,
      pageSize: 20
    };
    this.loadMessage = this.loadMessage.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.updateStatus = this.updateStatus.bind(this);
    this.loadingMore = false;
    this.canLoadMore = true;
  }

  componentWillMount () {
    this.loadMessage();
  }

  componentWillUnmount () {}

  componentDidHide () { }


  async loadMessage() {
    if (this.loadingMore || !this.canLoadMore) {
      return;
    }
    this.loadingMore = true;
    try {
      let res = await Request.get(`/business/message_center/list?status=1&title=${this.state.title}&destUserId=${global.userInfo.userId}&pageNum=${this.state.page}&pageSize=${this.state.pageSize}`);
      if (res.data.code !== 200) {
        throw new Error();
      }
      let temp = [];
      if (this.state.page > 1) {
        temp = this.state.messages;
      }
      this.setState({
        messages: temp.concat(res.data.rows)
      }, () => {
        if (this.state.messages.length === res.data.total) {
          this.canLoadMore = false;
        }
        this.loadingMore = false;
      })
    } catch (e) {
      console.log('加载职位数据失败')
    }
  }

  async handleSearch(value) {
    this.canLoadMore = true;
    this.setState({
      title: value
    })
    this.setState({
      page: 1,
      pageSize: 20
    }, this.loadMessage)
    // debounce(() => {
    //
    // }, 100)
  }

  async handleScrollToEnd() {
    this.setState({
      page: ++this.state.page,
      pageSize: 20
    }, this.loadMessage)
  }

  async updateStatus(item) {
    await Taro.showLoading({
      title: '标记中...'
    });
    try {
      item.isRead = '1';
      let res = await Request.put('/business/message_center', item);
      if (res.data.code !== 200) {
        throw new Error();
      }
      this.loadingMore = false;
      this.canLoadMore = true;
      this.setState({
        page: 1,
        pageSize: 20
      }, this.loadMessage)
    } catch (e) {
      console.log("标记失败")
    } finally {
      await Taro.hideLoading();
    }
  }

  render () {

    let  {messages, title} = this.state;
    return (
      <View className='job_list'>
        <View className='search_input'>
          <Text className='iconfont icon-sousuo color-grey size36'/>
          <Input type='text' value={title} onInput={(e) => this.handleSearch(e.detail.value)} placeholder='搜索标题'/>
        </View>
        <ScrollView  scrollY={true} style={{height: 'calc(100vh - 60px)'}} onScrollToLower={this.handleScrollToEnd.bind(this)}>
          {
            messages.length !== 0 ? messages.map(item => {
                return (
                  <View className='job_item'>
                    <View className='house_info'>
                      <View className='row'>
                        <Text className='job_name'>{item.title}</Text>
                        <Text className='job_salary'>{item.rent}</Text>
                      </View>
                      <View className='row'>
                        <Text className='job_experience'>{item.content}</Text>
                      </View>
                      <View className='row'>
                        <View className='master_info'>
                          <Text>{item.createTime}</Text>
                        </View>
                        <View className='action_container'>
                          {item.isRead === '0' && <Text className='size26 color-green apply' onClick={async () => {
                            this.updateStatus(item)
                          }}>标为已读</Text>}
                          {item.isRead === '1' && <Text className='size32'>已读</Text>}
                        </View>
                      </View>
                    </View>
                  </View>
                );
              })
              :
              <View className='message_container'>
                尚未有消息
              </View>
          }
        </ScrollView>
      </View>
    )
  }
}
